/*
 * @Author: your name
 * @Date: 2022-04-29 14:32:02
 * @LastEditTime: 2022-05-06 16:44:19
 * @LastEditors: 阮中楠 1219043956@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \zjzl-web\src\components\SearchTable\mixins\v2\dynamic-table-col.js
 */

import ColumnConfig from "../../../classes/ColumnConfig.js";

/**
 * @author 阮中楠
 * @classdesc 动态表格列数据管理对象
 * 该文件应该再被重构一次。
 * 目前，已经找到了合适的方案实现表格动态列不再抖动的方案。并不是因为：
 * 1： 渲染表格列数组 引用指向变更
 * 2： 渲染表格列数组 属性hidden值更新不对
 *
 * 新的重构思路：
 * 1： 仍旧使用v-if和doLayout来完成界面渲染
 * 2： 不考虑配置任何的样式来实现表格列的关闭效果
 * 3： 简单实现对hidden值的更新，无论是直接更改hidden值，还是重新构建一个数组 均可以。
 * 只要能正确更新数据即可，尽量简单完成数据更新。数据设计流程尽可能减少过程。
 *
 * 请等待 阮中楠 自行来做一次重构
 * @class DynamicTableManager
 */
class DynamicTableManager {
  /** 要求在实例化对象时 必须首先提供一个数组 以供数据处理 */
  constructor(tableCols = []) {
    /** 被选择的列表值 @public */
    this.selectedList = [];
    /** 表格列配置数组 应当来自外部的props数组 @private */
    this.tableCols = tableCols;

    /** 用于拓展 储存渲染用的表格数据 这个数组应该是不变动引用的 @deprecated */
    this.store2renderTableList = this.fullPropsList.filter(
      colConfig =>
        colConfig.hidden === false && this.isOperationProp(colConfig) === false
    );

    //
    this.store2renderTableList = tableCols;

    // 初始化一次数据
    this.init();
  }

  /** 重新设置表格列配置数组 外部组件可能会需要更新数据 让管理者对象重新处理数据 @public */
  resetTableCols(newList = []) {
    this.tableCols = newList;
  }

  /** 满参数数组 仅负责实现拓展满参数 @private */
  get fullPropsList() {
    return this.tableCols.map(colConfig => new ColumnConfig(colConfig));
  }

  /** 当前项的prop配置是操作栏么？ @private */
  isOperationProp(colConfig) {
    return colConfig.prop === "operation";
  }

  /** 默认已选择的数组 仅根据传递而来的数组值做筛选判断 @private */
  get defaultSelectedList() {
    return this.fullPropsList.filter(
      // 默认已选择的数组不包含操作栏 操作栏不属于已选择的内容
      colConfig =>
        colConfig.hidden === false && this.isOperationProp(colConfig) === false
    );
  }

  /** 初始化数据 实现内部的 唯一一次的已选择数据初始化 @private */
  init() {
    this.selectedList = this.defaultSelectedList.map(
      colConfig => colConfig.key
    );
  }

  /** 全部显示的配置数组 即 hidden false @private */
  get allShowList() {
    return this.fullPropsList.map(colConfig => {
      colConfig.hidden = false;
      return colConfig;
    });
  }

  /** 可勾选的有意义数组 即全部可以被勾选的，用于渲染勾选表单控件的 数组 @public */
  get torenderCanSelectList() {
    // 该数组与 allShowList 数组是高度相似的 唯一的区别就是剔除掉不可以被勾选的内容
    return this.allShowList.filter(
      colConfig => this.isOperationProp(colConfig) === false
    );
  }

  /** 全部隐藏的配置数组 即 hidden true @private */
  get allHiddenList() {
    return this.fullPropsList.map(colConfig => {
      colConfig.hidden = true;
      return colConfig;
    });
  }

  /** 能够参与表格渲染的配置数组 @public @deprecated v1 */
  get torenderList() {
    // 全部隐藏项数组的 索引对象
    let allHiddenItemKeyObj = Object.assign(
      {},
      ...this.allHiddenList.map(colConfig => ({
        [colConfig.key]: colConfig
      }))
    );

    this.selectedList.forEach(
      keyname => (allHiddenItemKeyObj[keyname].hidden = false)
    );
    return Object.values(allHiddenItemKeyObj);
  }

  /** 更加简单粗暴的写法 覆盖上面的值 @public @deprecated v2 */
  get torenderList() {
    this.store2renderTableList.forEach(colConfig => {
      if (this.selectedList.includes(colConfig.prop)) {
        colConfig.hidden = false;
      } else {
        colConfig.hidden = true;
      }
    });

    this.store2renderTableList[
      this.store2renderTableList.length - 1
    ].hidden = false;

    return this.store2renderTableList;
  }

  // get torenderList() {
  //   return this.store2renderTableList;
  // }
}

/** 动态表格列 业务处理逻辑混入对象 即vue格式的对象 */
const dynamicTableCol = {
  data() {
    return {
      /** 动态表格处理对象 动态表格处理的业务 均用此对象实现业务
       * 要求在created生命周期内初始化
       */
      dynamicTableHandleObj: null
    };
  },

  // watch: {
  //   tableCols: {
  //     immediate: true,
  //     deep: true,
  //     handler(newVal, oldVal) {
  //       // TODO: 看情况增加
  //       // this.dynamicTableHandleObj.resetTableCols(newVal);
  //     }
  //   }
  // },

  created() {
    this.dynamicTableHandleObj = new DynamicTableManager(this.tableCols);
  },

  beforeUpdate() {
    // https://blog.csdn.net/my466879168/article/details/107150931
    this.$nextTick(() => {
      // 在数据加载完，重新渲染表格
      this.$refs["table"].doLayout();
    });
  }
};

export default dynamicTableCol;
